<template>
  <div class="user">
    <!-- 个人信息 -->
    <div class="b">个人信息</div>
    <!-- 去购物 -->
    <div class="g" @click="gos">去购物</div>
    <!-- 表格 -->
    <div class="message">
      <!-- 文字 -->
      <div class="d" @click="tui">退出登录</div>
      <div class="e">
        <img src="../assets/img/22.png" width="100%" alt="" />
      </div>
      <div class="f">
        <img src="../assets/img/23.png" width="100%" alt="" />
      </div>
      <table width="500px" height="280px" cellspacing="10px">
        <tr>
          <td>本店注册序号</td>
          <td>{{ exit.id }}</td>
        </tr>
        <tr>
          <td>用户名</td>
          <td>{{ exit.username }}</td>
        </tr>
        <tr>
          <td>性别</td>
          <td>{{ exit.sex }}</td>
        </tr>
        <tr>
          <td>手机号</td>
          <td>{{ exit.tel }}</td>
        </tr>
        <tr>
          <td>出生日期</td>
          <td>{{ exit.date }}</td>
        </tr>
        <tr>
          <td>收货地址</td>
          <td>{{ exit.place }}</td>
        </tr>
      </table>
    </div>
    <!-- 已购商品 -->
    <div class="goods">
      <el-button @click="jz" type="danger" style="margin-left: 16px"
        >已购商品
      </el-button>
    </div>
    <el-drawer
      :visible.sync="drawer2"
      :with-header="false"
      size="600px"
      direction="ltr"
    >
      <div class="yg">
        <div class="tc" @click="tc">退出</div>
        <span v-for="item in shop" :key="item.index">
          <!-- 图片 -->
          <img :src="item.imgurl" width="100%" height="100%" />
          <!-- 标题 -->
          <div class="xh">{{ item.title }}</div>
          <!-- 价格 -->
          <div class="price">￥ {{ item.price }}</div>
        </span>
      </div>
    </el-drawer>

    <!-- 编辑资料 -->
    <div class="btn">
      <el-button @click="drawer = true" type="danger" style="margin-left: 16px"
        >编辑资料
      </el-button>
    </div>

    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      size="600px"
      direction="rtl"
    >
      <div class="c">
        <div class="j" @click="qx">取消</div>
        <el-form
          status-icon
          label-width="80px"
          class="form"
          :model="change"
          :rules="rules"
          size="50px"
          ref="formRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model.trim="change.username"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio label="女" border class="m" v-model="change.sex"
              >我是美女</el-radio
            >
            <el-radio label="男" border class="m" v-model="change.sex"
              >我是帅哥</el-radio
            >
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model.trim="change.tel"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" default-time="change.date" prop="date">
            <el-date-picker
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="出生日期"
              v-model="change.date"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="收货地址" prop="place">
            <el-input v-model.trim="change.place" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" class="but" @click="update"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data() {
    // 验证用户名格式是否正确
    var reg_username = /^[a-zA-Z0-9_-]{4,16}$/;
    var validateUsername = (rule, value, callback) => {
      if (!reg_username.test(value)) {
        callback(new Error("用户名必须是4到16位字母、数字、下划线的组合！"));
      }
      callback();
    };

    //  验证手机号码格式是否正确
    var reg_tel =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    var validateTel = (rule, value, callback) => {
      if (!reg_tel.test(value)) {
        callback(new Error("请正确输入手机号！"));
      }
      callback();
    };

    return {
      // 控制抽屉的显示与隐藏
      drawer: false,
      drawer2: false,

      // 已购商品数组
      shop: [],

      exit: {
        id: "",
        username: "",
        sex: "",
        tel: "",
        date: "",
        place: "",
      },

      change: {
        id: "",
        username: "",
        sex: "",
        tel: "",
        date: "",
        place: "",
      },

      rules: {
        //   验证用户名
        username: [
          {
            validator: validateUsername,
            trigger: "blur",
          },
          { required: true },
        ],

        // 验证性别是否合法
        sex: [{ required: true, message: "请选择性别！", trigger: "change" }],

        // 验证手机号是否合法
        tel: [
          {
            validator: validateTel,
            required: true,
            trigger: "blur",
          },
        ],

        // 验证出生日期
        date: [
          {
            required: true,
            message: "请选择出生日期！",
            trigger: "change",
          },
        ],

        // 验证收货地址是否合法
        place: [
          { required: true, message: "请输入收货地址！", trigger: "blur" },
          {
            min: 10,
            message: "长度至少为9个字符！",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 退出登录
    tui() {
      window.sessionStorage.clear();
      this.$router.push("/home2");
    },

    // 去购物
    gos() {
      this.$router.push("/shop");
    },

    // 点击取消退出 隐藏抽屉
    qx() {
      this.drawer = false;
    },

    tc() {
      this.drawer2 = false;
    },

    // 加载已购商品
    async jz() {
      const { data: res } = await this.$http.post("/search2", this.exit);
      if (res.status !== 200) return this.$message.error("你还没购买任何东西");
      this.drawer2 = true;
      this.shop = res.message;
    },

    update() {
      // 对表单进行预验证
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;

        // 验证通过后：

        // 发送更改信息的post请求并接收返回数据
        const { data: res } = await this.$http.post("/update", this.change);
        // 修改失败通知用户
        if (res.status !== 200)
          return this.$message.console.error("修改失败！");

        // 修改成功后：

        // 更新个人信息
        this.exit = this.change;
        // 更新本地存储
        window.sessionStorage.setItem("username", this.change.username);
        window.sessionStorage.setItem("sex", this.change.sex);
        window.sessionStorage.setItem("tel", this.change.tel);
        window.sessionStorage.setItem("date", this.change.date);
        window.sessionStorage.setItem("place", this.change.place);
        // 发送成功消息通知用户 并隐藏抽屉
        this.$message.success("修改成功！");
        this.drawer = false;
      });
    },
  },

  created() {
    //   赋值给数据源
    this.exit.id = window.sessionStorage.getItem("id");
    this.exit.username = window.sessionStorage.getItem("username");
    this.exit.sex = window.sessionStorage.getItem("sex");
    this.exit.tel = window.sessionStorage.getItem("tel");
    this.exit.date = window.sessionStorage.getItem("date");
    this.exit.place = window.sessionStorage.getItem("place");
    this.change.id = window.sessionStorage.getItem("id");
    this.change.username = window.sessionStorage.getItem("username");
    this.change.sex = window.sessionStorage.getItem("sex");
    this.change.tel = window.sessionStorage.getItem("tel");
    this.change.date = window.sessionStorage.getItem("date");
    this.change.place = window.sessionStorage.getItem("place");
  },
};
</script>

<style lang="less" scoped>
.user {
  border: #b71c1c 3px solid;
}
.j,
.tc {
  position: absolute;
  top: 40px;
  right: 75px;
  width: 60px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  border-radius: 6px;
  border: 2px solid #b71c1c;
  color: #b71c1c;
}

.j:hover,
.tc:hover {
  cursor: pointer;
  background-color: #b71c1c;
  color: #fff;
}
.g,
.d {
  position: absolute;
  width: 100px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  border-radius: 6px;
  border: 2px solid #b71c1c;
  color: #b71c1c;
}
.g {
  top: 30px;
  left: 1280px;
}
.d {
  top: -172px;
  left: 932px;
}
.g:hover,
.d:hover {
  cursor: pointer;
  background-color: #b71c1c;
  color: #fff;
}
.f {
  position: absolute;
  top: 70px;
  left: 720px;
  width: 400px;
}
.e {
  position: absolute;
  top: 410px;
  left: -100px;
  width: 500px;
  height: 50px;
}

.c,
.yg {
  border: #b71c1c 3px solid;
  border-radius: 6px;
  width: 460px;
  height: 666px;
  margin-top: 24px;
  margin-left: 80px;
}

.yg {
  overflow: auto;
}
span {
  position: relative;
  display: inline-block;
  border: 2px solid #b71c1c;
  margin: 50px;
  width: 220px;
  height: 220px;
}
.xh {
  position: absolute;
  font-size: 12px;
  top: 233px;
  left: -41px;
  width: 300px;
  text-align: center;
  color: #b71c1c;
  font-weight: 600;
}

.price {
  position: absolute;
  color: #b71c1c;
  font-weight: 600;
  font-size: 12px;
  bottom: 10px;
  left: 10px;
}

.but {
  margin-left: 100px;
  margin-top: 30px;
}

.form {
  position: absolute;
  width: 70%;
  box-sizing: border-box;
  bottom: 0;
  top: 210px;
}

.btn {
  position: absolute;
  top: 140px;
  left: 390px;
}

.goods {
  position: absolute;
  top: 140px;
  left: 184px;
}

tr,
td {
  font-size: 12px;
  border: 2px solid #b71c1c;
  text-align: center;
  border-radius: 5px;
  font-weight: 500;
}
tr:hover {
  color: #fff;
  background-color: #b71c1c;
}

table {
  margin-top: 14px;
  margin-left: 36px;
  color: #b71c1c;
}

div {
  user-select: none;
}
.message {
  position: absolute;
  width: 600px;
  height: 300px;
  top: 200px;
  left: 200px;
  border: 3px solid #b71c1c;
  border-radius: 6px;
}
.b {
  position: absolute;
  top: 200px;
  left: 130px;
  width: 40px;
  height: 300px;
  text-align: center;
  line-height: 70px;
  font-size: 25px;
  color: #fff;
  border-radius: 6px;
  border: 3px solid #b71c1c;
  background-color: #b71c1c;
}
</style>